<!DOCTYPE html>
<!--suppress ThymeleafVariablesResolveInspection-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Responsive Admin Dashboard Template">
    <meta name="keywords" content="admin,dashboard">
    <meta name="author" content="skcats">
    <title></title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all" />
    <link th:href="@{/assets/plugins/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/assets/plugins/font-awesome/css/font-awesome.min.css}" rel="stylesheet">
    <link th:href="@{/assets/css/custom.css}" rel="stylesheet">
</head>
<style>
    .layui-table-page {
        text-align: center;
    }

    .utable .layui-laypage .layui-laypage-curr .layui-laypage-em {
        background-color: #1E9FFF;
    }
    .layui-input-inline{margin-left: 50px;}
    .layui-form-item{margin-top: 20px;}
    .layui-form-label{width: 80px;}
    .layui-table-view thead th {
        text-align: center;
        font-weight: bold;
    }
    .layui-table-view tbody td {
        text-align: center;
    }
</style>
<body>
<!--数据表格样式及附件-->
<script type="text/html" id="bar">
    <a id="edit" class="layui-btn layui-btn-xs" lay-event="edit">
        <i class="layui-icon">&#xe642;</i><span class="falg">ON</span> 编辑
    </a>
    <a class="layui-btn layui-btn-xs" lay-event="ck">
        <i class="layui-icon">&#xe6b2;</i>查看
    </a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
        <i class="layui-icon">&#xe640;</i>丢弃
    </a>
</script>
<!--搜索栏-->
<div class="layui-form-item">
    <div class="layui-inline">

        <div class="layui-input-inline">
            <input type="text" name="number" lay-verify="required|number" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">验证</label>
    </div>
    <div class="layui-inline">

        <div class="layui-input-inline">
            <input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">验证</label>
    </div>
    <div class="layui-inline">

        <div class="layui-input-inline">
            <input type="tel" name="url" lay-verify="url" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">验证</label>
        <button type="button" class="btn btn-info btn-addon"><i class="fa fa-spin fa-refresh"></i> 查找</button>
        <button id="add" type="button" class="btn btn-info btn-warning"><i class="fa fa-plus"></i> 添加</button>
    </div>
</div>

<!--数据表格  数据表格使用的是方法渲染-->
<table class="layui-table"
       lay-data="{width:1150,height:500, url:'/score/scoredata', page:true, id:'tab',toolbar: '#toolbarDemo' }"
       lay-filter="tab">
    <thead>
    <tr>
        <th lay-data="{type: 'checkbox', fixed: 'left'}"></th>
        <th lay-data="{field:'scoreid', width:80, sort: true}">成绩id</th>
        <th lay-data="{field:'stuid', width:80}">学生id</th>
        <th lay-data="{field:'score', width:80}">学生成绩</th>
        <th lay-data="{field:'rescore', width:100}">补考成绩</th>
        <th lay-data="{field:'courseid', width:100}">关联课程id</th>
        <th lay-data="{field:'testtype', width:100}">考试类型</th>
        <th lay-data="{field:'termid', width:100}">关联学期id</th>
        <th lay-data="{field:'scoretime', width:100}">考试时间</th>
        <th lay-data="{field:'empid', width:100}">录入人员id</th>
        <th lay-data="{field:'remark', width:100}">备注</th>
        <th lay-data="{fixed: 'right', title:'操作', toolbar: '#bar', width:252}"></th>
    </tr>
    </thead>
</table>
</body>
<script th:src="@{/js/register/jquery-3.1.0.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:inline="none">
    layui.use('table', function () {
        var table = layui.table;



        //监听单元格编辑(修改)
        table.on('edit(tab)', function(obj){
            alert(obj.data);
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段
            $.ajax({
                url: '/score/upd',
                type: 'post',
                data: {
                    scoreid:data.scoreid,
                    stuid:data.stuid,
                    score:data.score,
                    rescore:data.rescore,
                    courseid:data.courseid,
                    testtype:data.testtype,
                    termid:data.termid,
                    scoretime:data.scoretime,
                    empid:data.empid,
                    remark:data.remark
                },
                dataType: 'text'
            })
        });

        //点击添加iframe窗方法(添加)
        $("#add").on('click',function(){
            layer.open({
                type: 2,
                title: '新增答辩成绩',
                maxmin: true, //开启最大化最小化按钮
                area: ['620px', '450px'],
                content: ['/score/toadd']//这是链接你的页面地址 url
            });
        });

        //监听行工具事件
        table.on('tool(tab)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除么?', function (index) {
                    alert(data.scoreid);
                    obj.del();
                    layer.close(index);
                    $.ajax({
                        url: '/score/del',
                        type: 'post',
                        data: {
                            id:data.scoreid
                        },
                        dataType: 'text',
                    })
                });
            }else if (obj.event == 'edit') {
                if($(".falg").html()=="ON"){
                    // 打开可编辑状态：
                    $(".layui-table").find('td').data('edit', true);
                    $(".falg").html("YES")

                }else {
                    $(".layui-table").find('td').data('edit', false);
                    $(".falg").html("ON")
                }

            }
        })

    })
</script>
</html>